
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Custom Elements &#8212; PixieDust Documentation</title>
    <link rel="stylesheet" href="_static/better.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/custom.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    './',
        VERSION:     '1.0',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true,
        SOURCELINK_SUFFIX: '.txt'
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="shortcut icon" href="_static/pd_icon.ico"/>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Dynamic Values" href="dynamic-values-pixieapp.html" />
    <link rel="prev" title="Custom HTML Attributes" href="html-attributes-pixieapp.html" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body>
    <header id="pageheader"><h1><a href="index.html ">
        PixieDust Documentation
    </a></h1></header>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <div class="section" id="custom-elements">
<h1>Custom Elements<a class="headerlink" href="#custom-elements" title="Permalink to this headline">¶</a></h1>
<div class="section" id="target">
<h2>&lt;target&gt;<a class="headerlink" href="#target" title="Permalink to this headline">¶</a></h2>
<p>Child element to the clickable source element. <code class="docutils literal"><span class="pre">&lt;target&gt;</span></code> can have any of the <a class="reference external" href="html-attributes-pixieapps.html">custom PixieApp HTML attributes</a> defined above. For example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span><span class="o">&lt;</span><span class="n">button</span> <span class="nb">type</span><span class="o">=</span><span class="s2">&quot;button&quot;</span><span class="o">&gt;</span><span class="n">Multiple</span> <span class="n">Targets</span>
      <span class="o">&lt;</span><span class="n">target</span> <span class="n">pd_target</span><span class="o">=</span><span class="s2">&quot;target{{prefix}}&quot;</span>
          <span class="n">pd_entity</span>
          <span class="n">pd_options</span><span class="o">=</span><span class="s2">&quot;handlerId=dataFrame&quot;</span><span class="o">/&gt;</span>
      <span class="o">&lt;</span><span class="n">target</span> <span class="n">pd_target</span><span class="o">=</span><span class="s2">&quot;target2{{prefix}}&quot;</span>
          <span class="n">pd_entity</span>
          <span class="n">pd_options</span><span class="o">=</span><span class="s2">&quot;keyFields=zone;aggregation=AVG;handlerId=barChart;valueFields=unique_customers;rowCount=100/&quot;</span><span class="o">&gt;</span>
<span class="o">&lt;/</span><span class="n">button</span><span class="o">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="pd-script">
<h2>&lt;pd_script&gt;<a class="headerlink" href="#pd-script" title="Permalink to this headline">¶</a></h2>
<p>Contains Python code as child text. It has the same meaning as the pd_script attribute, except that it can contain multiple lines of Python code. Because indentation is important in Python, be careful to not have empty space in your code—regardless of the indentation level of your HTML markup. For example:</p>
<div class="highlight-default"><div class="highlight"><pre><span></span>  <span class="o">&lt;</span><span class="n">pd_script</span><span class="o">&gt;</span>
<span class="kn">import</span> <span class="nn">json</span>
<span class="nb">print</span><span class="p">(</span><span class="n">json</span><span class="o">.</span><span class="n">dumps</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">myJson</span><span class="p">)</span>
  <span class="o">&lt;/</span><span class="n">pd_script</span><span class="o">&gt;</span>
</pre></div>
</div>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="use.html">Use PixieDust</a></li>
<li class="toctree-l1"><a class="reference internal" href="develop.html">Develop for PixieDust</a></li>
<li class="toctree-l1 current"><a class="reference internal" href="pixieapps.html">PixieApps</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="hello-world-pixieapp.html">Hello World</a></li>
<li class="toctree-l2"><a class="reference internal" href="reference-pixieapp.html">Reference</a></li>
<li class="toctree-l2"><a class="reference internal" href="html-attributes-pixieapp.html">Custom HTML Attributes</a></li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Custom Elements</a></li>
<li class="toctree-l2"><a class="reference internal" href="dynamic-values-pixieapp.html">Dynamic Values</a></li>
<li class="toctree-l2"><a class="reference internal" href="create-widget-pixieapp.html">Creating a Widget</a></li>
<li class="toctree-l2"><a class="reference internal" href="hello-world-data-pixieapp.html">Hello World with Data</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="pixiegateway.html">PixieGateway</a></li>
<li class="toctree-l1"><a class="reference internal" href="releasenotes.html">Release Notes</a></li>
</ul>

<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <div><input type="text" name="q" /></div>
      <div><input type="submit" value="Go" /></div>
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
  <footer id="pagefooter">&copy; 2017, IBM.
      Created using <a href="http://sphinx-doc.org/">Sphinx</a>
      1.6.3.

  </footer>

  
  </body>
</html>